<template>
    <t-notification title="标题名称" :content="content" placement="top-right" v-if="content" :duration="1000"
        @duration-end="content = ''" />
    <div class='container'>
        <t-chat-action :is-good="isGood" :is-bad="isBad"
            content="它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。"
            :operation-btn="['good', 'bad', 'replay', 'copy']" @operation="handleOperation" />
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';

const isGood = ref(false);
const isBad = ref(false);
const content = ref('');
const handleOperation = (type: string, options: any) => {
    console.log(type, options);
    if (type === 'good') {
        isGood.value = !isGood.value;
        isBad.value = false;
        content.value = '好的';
    } else if (type === 'bad') {
        isBad.value = !isBad.value;
        isGood.value = false;
        content.value = '不好的';
    }
    else if (type === 'replay') {
        content.value = '重新发送';
    }
    else if (type === 'copy') {
        content.value = '复制';
    }
};
</script>
<style lang='scss' scoped>
.container {
    background-color: #dbd6d6;
    border-radius: 5px;
}
</style>